{layout name="layout" /}

<div class="layui-form" id="config_form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    {foreach $configList as $key=>$config }
        {switch $config['field_type'] }
        {case 1 }
        <div class="layui-form-item">
            <label class="layui-form-label">{$config.title}</label>
            <div class="layui-input-block">
                <input type="text" name="{$config.id}" autocomplete="off" placeholder="{$config.placeholder}" class="layui-input" value="{$config.value}">
            </div>
        </div>
        {/case}
    {case 2 }
    <div class="layui-form-item">
        <label class="layui-form-label">{$config.title}</label>
        <div class="layui-input-inline">
            <input type="text" name="{$config.id}" value="{$config.value}" lay-verify="required" placeholder="{$config.placeholder}" autocomplete="off" class="layui-input">
        </div>
    </div>
    {/case}
    {case 3 }
    <div class="layui-form-item">
        <label class="layui-form-label">{$config.title}</label>
        <div class="layui-input-block">
            <select name="{$config.id}" lay-filter="aihao">
                {php} $lists = explode(',',$config['values']); {/php}
                {foreach $lists as $index=>$list}
                    {eq name="list" value="$config['value']"}
                    <option value="{$list}" selected="">{$list}</option>
                    {else/}
                    <option value="{$list}">{$list}</option>
                    {/eq}
                {/foreach}
            </select>
        </div>
    </div>
    {/case}
<!--    多选框目前数据提交格式不符合统一修改规范，暂不推荐使用，如有需求，建议将本页面改为form提交，控制器接收复选框的数组值，layui接收到的值是分离的对象，不方便实现-->
    {case 5 }
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">{$config.title}</label>
        <div class="layui-input-block">
            {php} $lists = explode(',',$config['values']); {/php}
            {foreach $lists as $index=>$list}
            {php} if(in_array($list,explode(',',$config['value']))){ {/php}
            <input type="checkbox" idkey="{$config.id}" name="checkbox-{$config.id}[]" lay-skin="primary"
                   title="{$list}"
                   checked="checked"
                   value="{$list}">
            {php} }else{ {/php}
            <input type="checkbox" idkey="{$config.id}" name="checkbox-{$config.id}[]" lay-skin="primary"
                   title="{$list}"
                   value="{$list}" >
            {php} } {/php}
            {/foreach}
        </div>
    </div>
    {/case}
    {case 6 }
    <div class="layui-form-item">
        <label class="layui-form-label">{$config.title}</label>
        <div class="layui-input-block">
            {php} $lists = explode(',',$config['values']); {/php}
            {foreach $lists as $index=>$list}
            {php} if(in_array($list,explode(',',$config['value']))){ {/php}
            <input type="radio" name="{$config.id}" lay-skin="primary" title="{$list}" checked="checked" value="{$list}">
            {php} }else{ {/php}
            <input type="radio" name="{$config.id}" lay-skin="primary" title="{$list}" value="{$list}">
            {php} } {/php}
            {/foreach}
        </div>
    </div>
    {/case}
    {case 8 }
    <div class="layui-inline">
        <label class="layui-form-label">{$config.title}</label>
        <div class="layui-input-inline">
            <select name="{$config.id}" lay-verify="required" lay-search="">
                <option value="">直接选择或搜索选择</option>
                {php} $lists = explode(',',$config['values']); {/php}
                {foreach $lists as $index=>$list}
                {eq name="list" value="$config['value']"}
                <option value="{$list}" selected="">{$list}</option>
                {else/}
                <option value="{$list}">{$list}</option>
                {/eq}
                {/foreach}
            </select>
        </div>
    </div>
    {/case}
    {case 9 }
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">{$config.title}</label>
        <div class="layui-input-block">
            <textarea name="{$config.id}" placeholder="{$config.placeholder}" class="layui-textarea">{$config.value}</textarea>
        </div>
    </div>
    {/case}
        {default /}
            <div class="layui-form-item">
                <label class="layui-form-label">{$config.title}(默认样式，请修改展示类型)</label>
                <div class="layui-input-block">
                    <input type="text" name="{$config.id}" placeholder="{$config.placeholder}" autocomplete="off" class="layui-input" value="{$config.value}">
                </div>
            </div>
        {/switch}
    {/foreach}

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
        </div>
    </div>

</div>
<script>
    layui.use('form', function(){
        var form = layui.form;

        //各种基于事件的操作，下面会有进一步介绍
         form.on('submit(*)', function(data){
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log('data:',data) //被执行提交的form对象，一般在存在form标签时才会返回
            var addArray = [];
            var tempArray = [];
             for(var item in data.field){
                 //如果带有复选框关键字，则不推送到主数组，暂放到临时数组待处理
                if(item.indexOf('checkbox') === 0){
                    var itemArr = item.split("-");
                    var itemArr2 = itemArr[1].split("[");
                    //分割字符串后得到复选框所有id和value
                    // console.log(itemArr2[0],data.field[item])
                    var tempObj = {
                        'id':itemArr2[0],
                        'value':data.field[item]
                    }
                    tempArray.push(tempObj)
                }else{
                    //如果是非复选框，直接获取id和value存放到主数组
                    var itemValue = data.field[item];
                    var itemData = {
                        'id':item,
                        'value':itemValue
                    }
                    addArray.push(itemData)
                }
             }

             console.log(tempArray)
             //----------------将相同Key的数组合并，并以逗号分割value------------------------
             var beforeData = tempArray;      //将dataArr赋值给beforeData  也可直接操作dataArr
             let tempArr = [];
             let afterData = [];//新数组
             for (let i = 0; i < beforeData.length; i++) {
                 if (tempArr.indexOf(beforeData[i].id) === -1) {
                     afterData.push({
                         id: beforeData[i].id,
                         value: [beforeData[i].value],
                     });
                     tempArr.push(beforeData[i].id);
                 } else {
                     for (let j = 0; j < afterData.length; j++) {
                         if (afterData[j].id == beforeData[i].id) {
                             afterData[j].value.push(beforeData[i].value);
                             break;
                         }
                     }
                 }
             }
             //循环afterData并且合并value值用逗号隔开
             afterData.map((item) => {
                 item.value= item.value.join(",");
             });
             //-------------------------------------------------------------------------
             console.log(afterData)
             //循环合并后的数组，逐一推送到主数组中
             afterData.filter( item => {
                  console.log(item)
                 addArray.push(item);
              })

             console.log(addArray)

            $.ajax({
                url: "/admin/config/editList",
                type: "POST",
                data:{
                    'addArray':addArray,
                },
                dataType: "json",
                success: function(result){
                    console.log(result)
                    if(result.code === 0){
                        layer.msg(result.msg)
                    }else{
                        layer.msg(result.msg)
                    }
                },
                error:function(err){
                    layer.msg(err.statusText)
                    console.log(err.statusText);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })
    });
</script>